<template>
  <div class="emotion-home">
    <div class="main">
      <div class="banner">
        <img class="banner-img" src="../assets/images/tit_bg.jpg" alt="" />
        <div class="banner-mask"></div>
        <div class="banner-title">
          <h2><span>Elk Test</span><br />Elk Sexual Preference Test - Discover Your True Inner Desires</h2>
        </div>
        <div class="btn-box">
          <button class="start-btn" @click="startTest">👉 Start Test Now</button>
        </div>
      </div>
      <div class="desc-box">
        <p class="desc">"Using scientific assessment methods, gain deep insights into your sexual preference characteristics to better understand yourself and establish healthy, harmonious intimate relationships."</p>
      </div>
    </div>
    <div class="content">
      <div class="relationship-desc">
        <div>🌿Over 850,000 users tested, 23+ evaluation dimensions, 96% user recommendation rate, 10 minutes to complete the test.</div>
        <div style="color: #a182f2">💞Discover your sexual preference traits, embrace your true self, and build a healthy sexual identity.</div>
        <div>💞Improve communication with your partner and enhance the quality of your intimate relationship by understanding your own preferences better.</div>
        <div class="tip4" style="color: #a182f2">💭Eliminate misunderstandings and anxieties about sexual preferences, build a healthy and positive sexual mindset, and enhance overall psychological well-being.</div>
      </div>

      <!-- FAQ Section -->
      <div class="faq-section">
        <h2 class="faq-title">Why is this test worth taking seriously?</h2>
        <div class="faq-list">
          <div v-for="(item, idx) in faqList" :key="idx" class="faq-item">
            <div class="faq-question" :class="{ open: openIndex === idx }" @click="toggleFaq(idx)">
              <span>{{ item.q }}</span>
              <span class="faq-icon">{{ openIndex === idx ? '－' : '＋' }}</span>
            </div>
            <transition name="smooth-faq">
              <div v-if="openIndex === idx" class="faq-answer">
                <span v-html="item.a"></span>
              </div>
            </transition>
            <div class="faq-divider" v-if="idx < faqList.length - 1"></div>
          </div>
        </div>
      </div>

      <!-- Testimonials Carousel Section -->
      <div class="testimonials-section">
        <h2 class="testimonials-title">See what users have to say about us</h2>
        <p class="testimonials-subtitle">
          QMT Emotional Dependency Mode Test has helped <br />
          over 1w+ users discover their true emotional <br />
          dependency patterns
        </p>

        <div class="carousel-container" @mouseenter="pauseAutoSlide" @mouseleave="resumeAutoSlide">
          <div class="carousel-wrapper" :style="{ transform: `translateX(-${currentSlide * 100}%)` }" @transitionend="onTransitionEnd">
            <!-- 展示所有轮播项，最后添加第一项的克隆 -->
            <div v-for="(testimonial, index) in displayTestimonials" :key="index === displayTestimonials.length - 1 ? 'clone' : index" class="testimonial-item">
              <div class="testimonial-content">
                <p class="testimonial-text">{{ testimonial.text }}</p>
                <div class="testimonial-user">
                  <div class="testimonial-avatar">
                    <img :src="testimonial.avatar | imgPath" alt="User avatar" />
                  </div>
                  <div class="testimonial-user-info">
                    <div class="testimonial-name">{{ testimonial.name }}</div>
                    <div class="testimonial-role">{{ testimonial.role }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="carousel-dots">
            <span v-for="(dot, index) in testimonials.length" :key="index" class="dot" :class="{ active: getRealIndex(currentSlide) === index }" @click="setSlide(index)"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import report_elk from '../utils/report_elk.json'
export default {
  name: 'EmotionHome',
  data() {
    return {
      autoSlideTimer: null, // 存储定时器的变量
      openIndex: 0, // Default open is the third item
      currentSlide: 0, // Current slide index
      isTransitioning: false, // 是否正在过渡中
      testimonials: [
        {
          text: 'Honestly, I wasn’t expecting much—but this test blew me away. The level of detail in the 22 dimensions was eye-opening and helped me understand parts of myself I’ve never really explored.',
          name: 'Tyler R.',
          role: 'Veteran Player User',
          avatar: 'https://randomuser.me/api/portraits/women/45.jpg',
        },
        {
          text: 'A super fun and surprisingly insightful experience. It felt less like a quiz and more like a deep dive into my psyche. Highly recommend doing it with your partner!',
          name: 'Mia J.',
          role: 'New User',
          avatar: 'https://randomuser.me/api/portraits/men/33.jpg',
        },
        {
          text: "This test is much more nuanced than most personality quizzes. It helped me articulate feelings I've had for years but never fully understood.",
          name: 'Jordan M.',
          role: 'Premium Member',
          avatar: 'https://randomuser.me/api/portraits/women/69.jpg',
        },
        {
          text: "It's refreshing to find a test that explores sexuality without shame or judgment. It felt affirming and gave me some things to reflect on—especially about consent and communication.",
          name: 'Eliza K.',
          role: 'Regular User',
          avatar: 'https://randomuser.me/api/portraits/men/76.jpg',
        },
      ],
      faqList: [
        {
          q: 'What is the Elk Sexual Preference Test? ',
          a: `The Elk Sexual Preference Test is a professionally designed assessment tool based on psychological theories. It evaluates an individual's preferences in sexual behavior, fantasies, and arousal through carefully crafted questions. The test is conducted anonymously, and the results are for personal reference only, aiming to help you better understand your sexual preferences and promote healthy sexual psychological development and intimate relationship building.`,
        },
        {
          q: 'Can the test results help me solve real-life issues?',
          a: 'The test results can provide you with a better understanding of your sexual preference characteristics, offering insights to improve intimate relationships, enhance sexual satisfaction, and promote mental health. However, the results are for reference only. If you have serious psychological or relationship issues, it is recommended to consult a professional psychologist or sex therapist.',
        },
        {
          q: 'How long does it take to complete the test?',
          a: 'The Moose Sexual Preference Test typically takes about 8-12 minutes to complete, depending on how quickly an individual processes and answers the questions. It is recommended to take the test in a quiet, distraction-free environment to achieve the most accurate results.',
        },
      ],
    }
  },
  computed: {
    // 添加复制的第一个元素到末尾，用于无缝循环
    displayTestimonials() {
      return [...this.testimonials, this.testimonials[0]]
    },
  },
  created() {
    console.log('report_elk', report_elk)

    // 每次打开Home页面时重新生成uid
    this.generateNewUid()
    this.test()
    // console.log('ta', ta)

    // 上报用户使用的PC, iOS, Android
    // ta.track('platform', { platform: this.env.isBrowser ? 'PC' : this.env.isIOS ? 'iOS' : 'Android' })
    // 上报用户使用的浏览器
    // ta.track('browser', { browser: navigator.userAgent })

    // ta.track('test_intro_show', { TestID: 'Test_1' })
  },
  methods: {
    test() {
      this.faqList.forEach((item) => {
        let task = {
          msgId: item.q,
          text: item.a,
          cb(result) {
            item.children[0].innerText = result
          },
        }
        // console.log('task', task)
      })
    },

    // 生成新的uid并保存
    generateNewUid() {
      // 清除所有缓存数据
      this.$store.commit('clearAllData')

      // 总是生成新的uid，不管是否已存在
      let time = new Date().getTime()
      let randomNum = Math.floor(Math.random() * 1000000)
        .toString()
        .padStart(6, '0')
      let uid = time + randomNum

      // 保存到Vuex和localStorage
      // this.$store.commit('setUid', uid)
      localStorage.setItem('uid', uid)

      // console.log('uid:', uid)
    },

    startTest() {
      // 导航到测试页面，
      this.$router.push({
        path: '/test',
        query: {
          uid: localStorage.getItem('uid'),
        },
      })
      // ta.track('test_intro_click_start', { TestID: 'Test_1' })
      // 如果已经做了选择情况下 直接跳转到test页面 接着开始做题
      // if (this.$store.state.currentStage > 1) {
      //   this.$router.push('/test')
      // }
    },
    toggleFaq(idx) {
      this.openIndex = this.openIndex === idx ? -1 : idx
    },
    setSlide(index) {
      this.currentSlide = index
      // 重置自动轮播计时器
      this.resetAutoSlideTimer()
    },
    nextSlide() {
      if (this.isTransitioning) return
      this.isTransitioning = true
      this.currentSlide++
      // 如果是最后一个（克隆的第一个），过渡结束后会瞬间跳回第一个
    },
    // 过渡结束后的处理
    onTransitionEnd() {
      this.isTransitioning = false
      // 如果滑动到克隆的第一个，立即无动画跳回真正的第一个
      if (this.currentSlide >= this.testimonials.length) {
        setTimeout(() => {
          const wrapper = document.querySelector('.carousel-wrapper')
          if (wrapper) {
            wrapper.style.transition = 'none'
            this.currentSlide = 0
            // 强制重排后恢复过渡效果
            setTimeout(() => {
              wrapper.style.transition = 'transform 0.5s ease-in-out'
            }, 50)
          }
        }, 0)
      }
    },
    // 获取实际索引（用于指示点）
    getRealIndex(slideIndex) {
      return slideIndex % this.testimonials.length
    },

    // 鼠标悬停时暂停自动轮播
    pauseAutoSlide() {
      if (this.autoSlideTimer) {
        clearInterval(this.autoSlideTimer)
        this.autoSlideTimer = null
      }
    },

    // 鼠标离开时恢复自动轮播
    resumeAutoSlide() {
      if (!this.autoSlideTimer) {
        this.resetAutoSlideTimer()
      }
    },

    resetAutoSlideTimer() {
      if (this.autoSlideTimer) {
        clearInterval(this.autoSlideTimer)
      }
      this.autoSlideTimer = setInterval(this.nextSlide, 4000) // 每4秒轮播一次
    },

    startAnimation(el) {
      el.style.height = 'auto'
      const height = el.scrollHeight
      el.style.height = '0px'
      // 强制重排
      el.offsetHeight
      el.style.height = height + 'px'
    },
  },
  mounted() {
    // 启动自动轮播
    this.resetAutoSlideTimer()
  },
  beforeDestroy() {
    // 组件销毁前清除定时器
    if (this.autoSlideTimer) {
      clearInterval(this.autoSlideTimer)
    }
  },
}
</script>

<style scoped lang="scss">
.emotion-home {
  margin: 0 auto;
  background: #fff;
}

.banner {
  position: relative;
  width: 100%;
  height: calc(100vh - 50px - 162px - 25px);
}

.banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner-mask {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0.7) 100%);
}

.banner-title {
  display: block;
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  text-align: center;
  z-index: 2;
}

.banner-title h2 {
  display: block;
  width: 100%;
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  font-family: NotoSans-ExtraBold;
  > span {
    display: inline-block;
    font-size: 1.9rem;
    padding-bottom: 20px;
  }
}

.desc-box {
  background: #fff;
  width: 100%;
  // padding: 16px 0px;
  padding: 32px 0px 42px;
  box-sizing: border-box;
}

.desc {
  width: 90%;
  margin: 0 auto;
  color: #111;
  font-size: 18px;
  font-weight: 500;
  line-height: 27px;
  text-align: center;
  letter-spacing: normal;
  font-family: NotoSerif-Medium;
}

.desc-link {
  color: #7b5cff;
  // cursor: pointer;
  text-decoration: underline;
  font-size: 0.98rem;
}

.btn-box {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 400px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

.start-btn {
  width: 100%;
  height: 50px;
  background: #7b5cff;
  color: #fff;
  font-size: 1.2rem;
  border: none;
  border-radius: 30px;
  padding: 0 0;
  box-shadow: 0 2px 8px rgba(123, 92, 255, 0.12);
  transition: background 0.2s;
  font-family: NotoSans-SemiBold;
}

// .start-btn:hover {
//   background: #5a3fd6;
// }

.content {
  .relationship-desc {
    padding: 16px;
    background-color: #faf2ff;
    color: #111;
    font-size: 16px;
    > div {
      margin-bottom: 16px;
    }
    > div:last-child {
      margin-bottom: 0;
    }
  }
  .tip4 {
    color: #111;
    // font-family: NotoSerif-MediumItalic;
    // text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.7);
  }
  .fact {
    // background: url('../assets/images/fact_bg.webp') no-repeat;
    // background-size: 100% cover;
    > img {
      width: 100%;
      height: auto;
    }
  }
}

.faq-section {
  background: #f8f2ff;
  padding: 32px 16px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.faq-title {
  width: 70%;
  font-size: 1.2rem;
  font-weight: bold;
  color: #111;
  margin-bottom: 12px;
  text-align: center;
  font-family: NotoSans-ExtraBold;
}

.faq-list {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
}

.faq-item {
  width: 100%;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1rem;
  color: #111;
  padding: 16px 22px;
  // cursor: pointer;
  // user-select: none;
  //transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: left;
  font-family: NotoSans-SemiBold;
}

.faq-question.open {
  // background: #fff;
}

.faq-icon {
  font-size: 1.3rem;
  font-weight: normal;
  color: #111;
  display: block;
  width: 24px;
  text-align: center;
  font-family: NotoSans-SemiBold;
}

.faq-answer {
  color: #999;
  font-size: 14px;
  padding: 0 22px 16px 22px;
  line-height: 1.6;
  overflow: hidden;
  text-align: left;
}

.faq-divider {
  height: 1px;
  background: #eee;
}

/* 平滑过渡动画 */
.smooth-faq-enter-active,
.smooth-faq-leave-active {
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  max-height: 300px;
  opacity: 1;
  overflow: hidden;
}

.smooth-faq-enter,
.smooth-faq-leave-to {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
}

/* Testimonials Carousel Styles */
.testimonials-section {
  background: #f8f2ff;
  padding: 0px 0px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.testimonials-title {
  width: 70%;
  font-size: 1.2rem;
  font-weight: bold;
  color: #111;
  margin-bottom: 3px;
  font-family: NotoSans-ExtraBold;
}

.testimonials-subtitle {
  font-size: 0.8rem;
  color: #999;
  line-height: 1.4;
  margin-bottom: 12px;
}

.carousel-container {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.carousel-wrapper {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.testimonial-item {
  min-width: 100%;
  // margin: 0 5px;
  padding: 0 16px;
}

// .testimonial-content:hover {
//   box-shadow: 0 8px 20px rgba(123, 92, 255, 0.3); /* 鼠标悬停时显示更强的阴影 */
// }

.testimonial-content {
  background: #7b5cff;
  padding: 24px 20px;
  border-radius: 15px;
  color: white;
  text-align: left;

  // box-shadow: 0 4px 15px rgba(123, 92, 255, 0.2);
}

.testimonial-text {
  font-size: 1.2rem;
  line-height: 1.5;
  margin-bottom: 20px;
  font-family: NotoSerif-Medium;
}

.testimonial-user {
  display: flex;
  align-items: center;
}

.testimonial-avatar {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 12px;
  border: 2px solid rgba(255, 255, 255, 0.5);
}

.testimonial-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonial-user-info {
  display: flex;
  flex-direction: column;
}

.testimonial-name {
  font-weight: 600;
  font-size: 1rem;
  font-family: NotoSans-SemiBold;
}

.testimonial-role {
  font-size: 0.8rem;
  opacity: 0.8;
  color: #ccc;
}

.carousel-dots {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -30px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ddd;
  margin: 0 4px;
  // cursor: pointer;
  transition: background 0.3s ease;
}
.active {
  background: #7b5cff;
}
</style>
